<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>height() testing</title>
		<!-- load latest build of jquery.js -->
		<script type="text/javascript" src="../../../../jquery/dist/jquery.js"></script>
		<!-- load testrunner from jquery project -->
		<script type="text/javascript" src="testrunner.js"></script>
		<!-- load dimensions.js (this is what we're testing! -->
		<script type="text/javascript" src="../../jquery.dimensions.js"></script>
		<style type="text/css" media="screen">
			body{ margin:0; border:0; padding:0; height:500px; }
			h1,h2,p,#tests{display:none;position:absolute;}
			#absolute { position: absolute; }
			#relative { position: relative; }
			#static { position: static; }
			#h1 { margin:10px; border:2px solid #000; padding:5px; width:50px; height:50px; }
		</style>
		
		<script type="text/javascript" charset="utf-8">
			$(window).bind('load', function() {
				runTest(function() {
					window.parent.done($('#tests').html());
				});
			});
			test('innerHeight()', function() {
				equals( 60, $('#h1').innerHeight(), "$('#h1').innerHeight()" );
				equals( 60, $('#h1').hide().innerHeight(), "$('#h1').hide().innerHeight()" );
			});
			test('outerHeight()', function() {
				equals( 64, $('#h1').outerHeight(), "$('#h1').outerHeight()" );
				equals( 64, $('#h1').hide().outerHeight(), "$('#h1').hide().outerHeight()" );
				equals( 84, $('#h1').outerHeight({ margin: true }), "$('#h1').outerHeight({ margin: true })" );
				equals( 84, $('#h1').hide().outerHeight({ margin: true }), "$('#h1').hide().outerHeight({ margin: true })" );
			});
		</script>
	</head>
	<body>
		<div id="main">
			<div id='absolute'>
				<div id="h1"></div>
			</div>
		</div>
		<ol id="tests"></ol>
	</body>
</html>